<template>
    <div class="time-out-text">
        <h1><</h1>
        <h1>
            <n-countdown ref="countdownRef" :duration="60000" :render="renderCountdown" :active="active"/>
        </h1>
        <h1>></h1>
    </div>
</template>

<script setup lang='ts' name="FrontEndTimeLock">
import type { CountdownInst, CountdownProps } from 'naive-ui';
import BoardChannel from '@/utils/boardChannel.ts';
const channel = new BoardChannel('bp-system');
const active = ref(false) // 必须初始为 true！
const countdownRef = ref<CountdownInst | null>()
channel.on('resetTime',()=>{
    active.value = true;
    countdownRef.value?.reset()
})
const renderCountdown: CountdownProps['render'] = ({
    seconds
}) => {
    return `${String(seconds).padStart(2, '0')}`
};

</script>
<style scoped lang='scss'>
.time-out-text {
    width: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('@/assets/images/boli-bg.png');
    background-size:cover;

    h1 {
        font-size: 48px;
        color: #fff;
        font-weight: bolder;
    }
}
</style>